<template>
    <div class="container">
        <h3>新增设备</h3>

        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="140px" class="demo-ruleForm">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="设备类型：">
                        <el-select v-model="ruleForm.type" placeholder="请选择" style="width: 300px" @change="equipmentTypechange">
                            <el-option v-for="item in type" :key="item.name" :label="item.name" :value="item.name"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分组：">
                        <el-input placeholder="请输入内容" v-model="ruleForm.group" style="width: 300px"> </el-input>
                    </el-form-item>
                    <el-form-item label="设备厂商：">
                        <el-select v-model="ruleForm.manufacturer" placeholder="请选择" style="width: 300px" @change="manufacturerchange">
                            <el-option v-for="item in manufacturer" :key="item.name" :label="item.name" :value="item.name"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备序列号：" v-if="show1">
                        <el-input placeholder="请输入内容" v-model="ruleForm.serial" style="width: 300px"> </el-input>
                    </el-form-item>
                    <el-form-item label="RTSP端口：" v-if="show4">
                        <el-input placeholder="请输入内容" v-model="ruleForm.rtsp" style="width: 300px"> </el-input>
                    </el-form-item>
                    <el-form-item label="密码：" v-if="show4">
                        <el-input placeholder="请输入内容" v-model="ruleForm.password" style="width: 300px"> </el-input>
                    </el-form-item>
                    <el-form-item label="服务端口：" v-if="show3">
                        <el-input placeholder="请输入内容" v-model="ruleForm.service" style="width: 300px"> </el-input>
                    </el-form-item>
                    <!-- <el-form-item label="直播源地址(流畅)：" v-if="show5">
                        <el-input placeholder="请输入内容" v-model="ruleForm.rtspHd" style="width: 300px"> </el-input>
                    </el-form-item> -->
                    <el-form-item label="购买时间：" v-if="show6">
                        <el-date-picker
                            v-model="ruleForm.purchaseTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择时间"
                            style="width: 300px"
                        >
                        </el-date-picker>
                    </el-form-item>
                  <el-form-item label="appKey：" >
                    <el-input placeholder="请输入内容" v-model="ruleForm.appKey" style="width: 300px"> </el-input>
                  </el-form-item>
                  <el-form-item label="appSecret：" >
                    <el-input placeholder="请输入内容" v-model="ruleForm.appSecret" style="width: 300px"> </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="设备名称：" v-if="show1">
                        <el-input placeholder="请输入内容" v-model="ruleForm.name" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="设备型号：" v-if="show1">
                        <el-input placeholder="请输入内容" v-model="ruleForm.model" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名称：" v-if="show4">
                        <el-input placeholder="请输入内容" v-model="ruleForm.username" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="HTTP端口：" v-if="show3">
                        <el-input placeholder="请输入内容" v-model="ruleForm.http" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="IP/域名：" v-if="show4">
                        <el-input placeholder="请输入内容" v-model="ruleForm.ip" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="通道号：" v-if="show3">
                        <el-input placeholder="请输入内容" v-model="ruleForm.channel" style="width: 300px"> </el-input>
                    </el-form-item>
                    <el-form-item label="直播源地址(高清)：" v-if="show5">
                        <el-input placeholder="请输入内容" v-model="ruleForm.rtspHd" style="width: 300px"> </el-input>
                    </el-form-item>
                    <el-form-item label="物联网号：" v-if="show2">
                        <el-input placeholder="请输入内容" v-model="ruleForm.wulianNo" style="width: 300px"> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item class="footerFixed" label-width="0px">
                <el-button type="primary" @click="save('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { facility_save, facility_findById,facility_update } from '@/request/api';
import { regionData, CodeToText } from 'element-china-area-data';
export default {
    data() {
        return {
            show1: true,//设备型号，设备名称，设备序列号
            show2: false,//物联网号
            show3: false,//通道号，http端口，服务端口，
            show4: false,//ip/域名，用户名称，密码，RTSP端口
            show5: false,//直播源地址(高清)，直播源地址(流畅)，
			show6:false, //购买时间
            city: '',
            area: '',
            isShow: false,
            type: [{ name: '摄像头' }, { name: '定位仪' }, { name: '打印设备' },{name:'气象传感'},{name:'土壤'},{name:'水质'},{name:'杀虫灯'},{name:'虫情'},{ name: '其他'}],
            manufacturer: [{ name: '海康威视' }, { name: '大华' }, { name: '萤石云' }, { name: '乐橙' }, { name: '新风向' }, { name: '科北' },{name:'世纪瑞通'}],
            labelPosition: 'right',
            allMessage: '',
            ruleForm: {
				manufacturer:''
			},
            rules: {
                type: [{ required: true, message: '不能为空', trigger: 'change' }],
                manufacturer: [{ required: true, message: '不能为空', trigger: 'change' }]
            }
        };
    },
    mounted() {
        this.id = this.$route.query.id;
        if (this.id == undefined) {
        } else {
            this.init();
        }
    },
    methods: {
        // 编辑获取数据
        init() {
            facility_findById(this.id).then((res) => { 
                this.ruleForm = res.data;
				this.manufacturerchange(this.ruleForm.manufacturer)
				// this.equipmentTypechange(this.ruleForm.type)
                // this.city = res.data.area.split(",")
                // var arr = ""
                // for (let i = 0; i < this.city.length; i++) {
                //     arr += CodeToText[this.city[i]] + "/"
                // }
                // this.area = arr.substr(0,arr.length-1)
            });
        },
        // 获取城市区
        // handleChange(value) {
        //     this.ruleForm.area = value.toString()
        //     var arr = ""
        //     for (let i = 0; i < value.length; i++) {
        //         arr += CodeToText[value[i]] + "/"
        //     }
        //     this.area = arr.substr(0,arr.length-1)
        // },
        // 返回
        backPage() {
            this.$router.go(-1);
        },
        // 判断必填项是否填了
        save(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    facility_save(this.ruleForm).then((res) => {
                        this.$notify({
                            title: '提示',
                            message: '保存成功',
                            type: 'success',
                            duration: 1000
                        });
                        this.$router.go(-1);
                    });
                } else {
                    return false;
                }
            });
        },
        // 新增和编辑
        submitForm() {
            if (this.id == undefined) {
                facility_save(this.ruleForm).then((res) => {
                    this.$notify({
                        title: '提示',
                        message: '保存成功',
                        type: 'success',
                        duration: 1000
                    });
                    this.$router.go(-1);
                });
            } else {
                facility_update(this.ruleForm).then((res) => {
                    this.$notify({
                        title: '提示',
                        message: '修改成功',
                        type: 'success',
                        duration: 1000
                    });
                    this.$router.go(-1);
                });
            }
        },
        //根据设备厂商选择判定显示输入框
        manufacturerchange(e) {
            if (e == '海康威视') (this.show3 = true), (this.show4 = true), (this.show5 = false),(this.show6 = true);
            if (e == '大华') (this.show3 = false), (this.show4 = true), (this.show5 = false),(this.show6 = true);
            if (e == '萤石云') (this.show3 = false), (this.show4 = false), (this.show5 = true),(this.show6 = true);
            if (e == '乐橙') (this.show3 = false), (this.show4 = false), (this.show5 = true),(this.show6 = true);
        },

        equipmentTypechange(e){
			      this.ruleForm.manufacturer = ""
            if (e == '摄像头') this.manufacturer= [{ name: '海康威视' }, { name: '大华' }, { name: '萤石云' }, { name: '乐橙' },{name:'世纪瑞通'}],this.show3 = true,this.show4 = true,this.show5 = true,this.show2 = true,this.show6 = true
            if (e == '传感器') this.manufacturer= [{ name: '新风向' },{ name: '科百'}, { name: '其他' }],this.show3 = false,this.show4 = false,this.show5 = false,this.show2 = true,this.show6 = true
            if (e == '定位仪') this.manufacturer= [{ name: '原链科技' }, { name: '其他' }],this.show3 = false,this.show4 = false,this.show5 = false,this.show2 = true,this.show6 = true
            if (e == '其他') this.manufacturer= [{ name: '原链科技' }, { name: '其他' }],this.show3 = false,this.show4 = false,this.show5 = false,this.show2 = false,this.show6 = true
          if (e == '打印设备') this.manufacturer= [{ name: '原链科技' }, { name: '其他' }],this.show3 = false,this.show4 = false,this.show5 = false,this.show2 = false,this.show6 = true
            if (e != '定位仪' && e != '其他') this.manufacturer= [{ name: '海康威视' }, { name: '大华' }, { name: '萤石云' }, { name: '乐橙' },{name:'世纪瑞通'}],this.show3 = true,this.show4 = true,this.show5 = true,this.show2 = true,this.show6 = true
        }
    }
};
</script>

<style scoped lang="less">
.demo-ruleForm {
    margin-top: 10px;
}

.demo-ruleForm .el-radio--small.is-bordered {
    width: 120px !important;
    margin-right: 10px !important;
}

.box {
    width: 85%;
    margin-bottom: 15px;
    dl {
        margin-bottom: 20px;
        overflow: hidden;
        dt {
            margin-bottom: 5px;
            font-size: 14px;
        }
        dd {
            font-weight: 500;
            font-size: 12px;
            float: left;
            width: 50%;
            line-height: 24px;
        }
    }
    dl:last-child {
        margin-bottom: 0;
    }
    .el-col-11 {
        height: 200px;
        overflow-y: auto;
        margin-left: 10px;
        border-left: 1px solid #EBEEF5;
        padding-left: 10px;
        p {
            color: #303133;
        }
        .record-tip-con {
            padding-top: 10px;
        }
    }
}
</style>
